<template>
  <div class="mod-role">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input prefix-icon="el-icon-search" v-model="dataForm.usedCarName" placeholder="车辆名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.auditStatus" placeholder="请选审核状态" filterable clearable>
          <!--<el-option label="待审核" value="1"></el-option>-->
          <el-option label="审核中" value="2"></el-option>
          <el-option label="审核通过" value="3"></el-option>
          <el-option label="审核驳回" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.onSale" placeholder="请选售卖状态" filterable clearable>
          <el-option label="在售" value="1"></el-option>
          <el-option label="已售出" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button v-if="isAuth('car:save')" type="primary" @click="submitUsedCar()">新增二手车评估单</el-button>
        <el-button v-if="isAuth('car:audit')" type="info" @click="submitDataButton = true"
                   :disabled="dataListSelections.length <= 0">审核
        </el-button>
        <el-button v-if="isAuth('car:delete')" type="danger" @click="deleteHandle()"
                   :disabled="dataListSelections.length <= 0">批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="usedCarId"
        header-align="center"
        fixed="left"
        align="center"
        width="80"
        label="车辆编号">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="200"
        label="车辆名称">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div class="text_overflow" slot="reference">
              <span>{{  scope.row.usedCarName| typefacelength }}</span>
            </div>
            <div class="pup_card">
              {{ scope.row.usedCarName}}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="usedCarRegistrationTime"
        header-align="center"
        align="center"
        label="上牌时间"
        width="110">
      </el-table-column>
      <el-table-column label="表显里程"
                       header-align="center"
                       align="center"
                       width="110">
        <template slot-scope="scope">
          {{ scope.row.usedCarMileage || '--' }}万公里
        </template>
      </el-table-column>
      <el-table-column label="排量"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.usedCarDisplacement || '--' }}T
        </template>
      </el-table-column>
      <el-table-column
        prop="usedCarEnergyPlanning"
        header-align="center"
        align="center"
        width="80"
        label="能源形式">
        <template slot-scope="scope">
          <span>{{ scope.row.usedCarEnergyPlanning | usedCarEnergyPlanning }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="onSale"
        header-align="center"
        align="center"
        width="100"
        label="是否在售">
        <template slot-scope="scope">
          <span>{{ scope.row.onSale===1?'在售':'已售出' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="160"
        label="提交时间">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        width="160"
        label="更新时间">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="150"
        label="车辆图片">
        <template slot-scope="scope">
          <div
            v-if="scope.row.usedCarImage !==undefined && scope.row.usedCarImage != null  && scope.row.usedCarImage.length > 0">
             <span v-for="item in scope.row.usedCarImage.slice(0, 1)">
              <img width="100%" :src="item.imagePath" alt="---"/>
             </span>
          </div>
          <div v-else>
            <span>图片未上传</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditStatus"
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.auditStatus | auditStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('car:audit')" type="text" size="small"
                     @click="openSubmitButton(scope.row.usedCarId)">审核
          </el-button>
          <el-button v-if="isAuth('car:save')" type="text" size="small"
                     @click="submitUsedCar(scope.row.usedCarId)">修改
          </el-button>
          <el-button v-if="isAuth('car:delete')" type="text" size="small"
                     @click="deleteHandle(scope.row.usedCarId)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--审核提交-->
    <el-dialog
      title="审核车辆信息"
      :visible.sync="submitDataButton"
      width="500px"
      :before-close="closeSubmitDialog">
      <div style="text-align: center">
        <el-radio-group v-model="usedCarAudit">
          <el-radio label="3" border>审核通过</el-radio>
          <el-radio label="4" border>审核驳回</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubmitDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="auditUsedCar()">提 交
        </el-button>
      </span>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <submit-car v-if="submitVisible" ref="submitCar" @refreshDataList="getDataList"></submit-car>
  </div>
</template>

<script>
  import SubmitCar from './usedCarSubmit2'

  export default {
    data() {
      return {
        dataForm: {
          usedCarName: '',
          auditStatus: '',
          onSale: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        submitVisible: false,
        submitDataButton: false,
        auditId: '',
        usedCarAudit: ''
      }
    },
    components: {
      SubmitCar
    },
    activated() {
      this.getDataList()
    },
    filters: {
      auditStatus(val) {
        if (val === 1) {
          return '待审核'
        } else if (val === 2) {
          return '审核中'
        } else if (val === 3) {
          return '审核通过'
        } else if (val === 4) {
          return '审核驳回'
        }
      },
      usedCarEnergyPlanning(val) {
        if (val === 1) {
          return '汽油'
        } else if (val === 2) {
          return '柴油'
        } else if (val === 3) {
          return '电动'
        } else if (val === 4) {
          return '混动'
        } else if (val === 5) {
          return '其他'
        }
      },
      typefacelength(value) {
        if (!value) return ''
        if (value.length > 8) {
          return value.slice(0, 12) + '...'
        }
        return value
      }
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/boss/car/listNew'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'usedCarName': this.dataForm.usedCarName || null,
            'auditStatus': this.dataForm.auditStatus || null,
            'onSale': this.dataForm.onSale || null,
          })
        }).then(({data}) => {
          if (data && data.code === 1) {
            console.log(data.data.list)
            this.dataList = data.data.list
            this.totalPage = data.data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      //填写二手车评估单
      submitUsedCar(id) {
        this.submitVisible = true
        this.$nextTick(() => {
          this.$refs.submitCar.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.usedCarId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/boss/car/delete'),
            method: 'post',
            data: JSON.stringify(ids)
          }).then(({data}) => {
            if (data && data.code === 1) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
        })
      },
      //审核车辆
      auditUsedCar() {
        var id = this.auditId;
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.usedCarId
        })
        if (this.usedCarAudit !== '' && this.usedCarAudit !== null) {
          this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '审核' : '批量审核'}]操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/boss/car/audit'),
              method: 'post',
              data: this.$http.adornData({
                'ids': ids,
                'auditStatus': this.usedCarAudit
              })
            }).then(({data}) => {
              if (data && data.code === 1) {
                this.$message({
                  message: '审核成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.closeSubmitDialog();
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }).catch(() => {
            //失败操作
          })
        } else {
          this.$message({
            message: '请选择一项审核状态',
            type: 'warning',
            duration: 1500,
          })
        }
      },
      openSubmitButton(id) {
        this.submitDataButton = true;
        this.auditId = id;
      },
      //关闭审核框
      closeSubmitDialog() {
        this.usedCarAudit = '';
        this.auditId = '';
        this.submitDataButton = false;
      }
    }
  }
</script>
